{% extends "base.html" %}
{% block content %}
    <p>
        <form id="qna_form" method="post">
            Author: <input type="text" name="author" id="qna_form_author" /><br/>
            Title: <input type="text" name="title" id="qna_form_title" /><br/>
            Content: <input type="text" name="content" id="qna_form_content" /><br/>
            <input type="submit">
        </form>
    </p>
    <p>
        {% for posting in postings %}
            <p>
                <b>{{ posting.author }}</b> wrote at {{ posting.date|date:"Y/m/d H:i" }}:
                <blockquote>
                    {{ posting.title }}<br/>
                    {{ posting.content }}
                </blockquote>
                Reply: {{ posting.nr_reply }}
            </p>
        {% endfor %}
    </p>
    
    <script>
        $('#qna_form').submit(
            function() {
                var author_frm = $('#qna_form_author').val();
                var title_frm = $('#qna_form_title').val();
                var content_frm = $('#qna_form_content').val();

                var posting = {
                    posting: {
                        author: author_frm,
                        title: title_frm,
                        content: content_frm,
                        type: "main",
                        category: "qna"
                    }
                };

                /*
                var req = '{"posting": ' + 
                    '{"author": "' + author_frm + '", ' +
                    '"title": "' + title_frm + '", ' +
                    '"content": "' + content_frm + '", ' +
                    '"type": "main", ' +
                    '"category": "qna"}' +
                    '}';
                */
                var req = $.toJSON(posting);
                    
                $.ajax(
                    {
                        url: "/api/posting",
                        type: "POST",
                        success: function(data) {
                            alert("OK\n" + data);
                        },
                        data: req,
                        dataType: "json",
                        contentType: "application/json"
                    }
                );
                
                return false;
            }
        );  
    </script>
{% endblock %}

